<template>
  <div>
    <div class="background">
      <img :src="user.backgroundImg" style="height: 100%;width: 100%;opacity: 0.4;" alt=""/>
    </div>

    <div>
      <div>
        <van-icon v-if="isCurrent" name="setting" color="#707070" size="25px"
                  style="float: right;margin: 8px 8px;opacity: 0.75;"
                  @click="goSetting"/>
        <van-icon v-else name="arrow-left" size="25px" style="float: left;margin: 8px 8px" @click="goBack"/>
      </div>
      <div style="position: absolute;top: 8vh;left:8vw;display: flex">
        <img :src="user.profileImg" class="image"
             style="height: 50px;width: 50px;border-radius: 50%;margin-top: 8px" alt=""/>
        <div style="display: inline-block;padding: 0 0 0 20px">
          <p style="font-size: 16px;opacity: 0.75">{{ user.name }}</p>
          <p style="font-size: 8px;opacity: 0.5;margin-bottom: 5px;margin-top: 1px">账号: {{ user.account }}</p>
          <div style="display: flex">
            <img v-if="user.gender ==='女'" style="height: 18px;width: 18px" src="../assets/images/icon/female.png" alt=""/>
            <img v-else style="height: 18px;width: 18px" src="../assets/images/icon/male.png" alt=""/>
            <img src="../assets/images/icon/location.png" style="height: 18px;width: 18px" alt=""/>
            <p style="font-size: 8px;opacity: 0.5;display: inline-block;margin-right: 5px;line-height: 18px">
              {{ user.location }}</p>
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 20vh;left:8vw;right:8vw">
        <p style="
        font-size: 12px;
        opacity: 0.75;
        height: 54px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;"
        >
          个性签名: {{ user.profileText }}</p>
      </div>
      <div style="position: absolute;top: 30vh;left:8vw;right:40vw;display:flex;justify-content: space-between">
        <div style="text-align: center">
          <p style="font-size: 20px">{{ user.followNum }}</p>
          <p style="opacity: 0.75">关注</p>
        </div>
        <div style="text-align: center">
          <p style="font-size: 20px">{{ user.followerNum }}</p>
          <p style="opacity: 0.75">粉丝</p>
        </div>
        <div style="text-align: center">
          <p style="font-size: 20px">{{ user.likeCollectNum }}</p>
          <p style="opacity: 0.75">获赞与收藏</p>
        </div>
      </div>
    </div>


    <div v-if="isCurrent" style="position: absolute;top: 40vh;width: 100%;padding-bottom: 7vh">
      <van-tabs  v-model="active" @click="changeTab">
        <van-tab title="发布" name="publish">
          <van-pull-refresh v-model="publish.refresh" @refresh="onRefresh()">
            <div v-infinite-scroll="loadMore"
                 infinite-scroll-distance="2">
              <note :note="publish.note" :is-edit="true"></note>
            </div>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="草稿" name="draft">
          <van-pull-refresh v-model="draft.refresh" @refresh="onRefresh()">
            <note :note="draft.note" :is-edit="true" :is-draft="true"></note>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="收藏" name="collect">
          <van-pull-refresh v-model="collect.refresh" @refresh="onRefresh()">
            <note :note="collect.note"></note>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else style="position: absolute;top: 40vh;width: 100%;">
      <van-tabs  v-model="active" @click="changeTab">
        <van-tab title="发布" name="publish">
          <van-pull-refresh v-model="publish.refresh" @refresh="onRefresh()">
            <div v-infinite-scroll="loadMore"
                 infinite-scroll-distance="2">
              <note :note="publish.note"></note>
            </div>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="收藏" name="collect">
          <van-pull-refresh v-model="collect.refresh" @refresh="onRefresh()">
            <note :note="collect.note"></note>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>


    <tabbar v-show="isCurrent"/>

  </div>
</template>

<script>
import Tabbar from "../components/Tabbar";
import Note from "../components/Note";
import {Toast} from "vant";

export default {
  components: {Tabbar, Note},
  data() {
    return {
      active: "publish",
      isCurrent: true,
      user: {
        id: "",
        account: "",
        backgroundImg: "",
        followNum: 0,
        followerNum: 0,
        gender: "",
        isAdmin: false,
        isFollowed: false,
        likeCollectNum: 0,
        location: "",
        name: "",
        profileImg: "",
        profileText: "",
      },
      publish: {
        note: [{
          id: "",
          img: "",
          isLiked: false,
          likeNum: 0,
          title: "",
          userId: "",
          userImg: "",
          userName: ""
        }],
        current: 1,
        pages: 0,
        refresh: true,
      },
      collect: {
        note: [{
          id: "",
          img: "",
          isLiked: false,
          likeNum: 0,
          title: "",
          userId: "",
          userImg: "",
          userName: ""
        }],
        current: 1,
        pages: 0,
        refresh: true,
      },
      draft: {
        note: [{
          id: "",
          img: "",
          isLiked: false,
          likeNum: 0,
          title: "",
          userId: "",
          userImg: "",
          userName: ""
        }],
        current: 1,
        pages: 0,
        refresh: true,
      },

    };
  },
  methods: {
    loadMore() {
      if (this.active === "publish") {
        if (this.publish.current <= this.publish.pages) {
          this.pageNote(this.user.id, this.publish.current, 0)
          this.publish.current++;
        }
      } else if (this.active === 'draft') {
        if (this.draft.current <= this.draft.pages) {
          this.pageNote(this.user.id, this.draft.current, 2)
          this.draft.current++;
        }
      } else {
        if (this.collect.current <= this.collect.pages) {
          this.pageNote(this.user.id, this.collect.current, 1)
          this.collect.current++;
        }
      }
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.changeTab();
      }, 1000);
    },
    changeTab() {
      if (this.active === "publish") {
        this.publish.note = [];
        this.publish.current = 1;
        this.pageNote(this.user.id, this.publish.current, 0)
        this.publish.current++;
        this.publish.refresh = false;
      } else if (this.active === 'draft') {
        this.draft.note = [];
        this.draft.current = 1;
        this.pageNote(this.user.id, this.draft.current, 2)
        this.draft.current++;
        this.draft.refresh = false;
      } else {
        this.collect.note = [];
        this.collect.current = 1;
        this.pageNote(this.user.id, this.collect.current, 1)
        this.collect.current++;
        this.collect.refresh = false;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    goSetting() {
      this.$router.push("/setting");
    },
    userDetail() {
      this.http.get("/api/phx/user/detail?userId=" + this.user.id).then((res) => {
        let temp = res.data.data;
        this.user.backgroundImg = temp.backgroundImg;
        this.user.account = temp.account;
        this.user.id = temp.id;
        this.user.name = temp.name;
        this.user.followerNum = temp.followerNum;
        this.user.followNum = temp.followNum;
        this.user.gender = temp.gender === 0 ? "男" : "女";
        this.user.isAdmin = temp.isAdmin;
        this.user.isFollowed = temp.isFollowed;
        this.user.likeCollectNum = temp.likeCollectNum;
        this.user.location = temp.location;
        this.user.profileImg = temp.profileImg;
        this.user.profileText = temp.profileText;
        this.changeTab();
      });
    },
    /**
     *
     * @param userId
     * @param current
     * @param type 0-发布,1-收藏,2-草稿
     */
    pageNote(userId, current, type) {
      let url;
      let params;
      switch (type) {
        default:
        case 0:
          url = "/api/phx/note/page";
          params = {
            userId: userId,
            currentPage: current,
            pageSize: 4,
            type: 0,
          };
          break;
        case 1:
          url = "/api/phx/note/page";
          params = {
            userId: userId,
            currentPage: current,
            pageSize: 4,
            type: 1,
          };
          break;
        case 2:
          url = "/api/hyc/note/draft/page";
          params = {
            currentPage: current,
            pageSize: 4,
          }
          break;
      }

      this.http.post(url, params).then((res) => {
        switch (type) {
          default:
          case 0:
            this.publish.pages = res.data.data.pages;
            for (let i in res.data.data.records) {
              this.publish.note.push(this.transNote(res.data.data.records[i]))
            }
            break;
          case 1:
            this.collect.pages = res.data.data.pages;
            for (let i in res.data.data.records) {
              this.collect.note.push(this.transNote(res.data.data.records[i]))
            }
            break;
          case 2:
            this.draft.pages = res.data.data.pages;
            for (let i in res.data.data.records) {
              this.draft.note.push(this.transNote(res.data.data.records[i]))
            }
            break;
        }

      });
    },
    transNote(temp) {
      return {
        id: temp.id,
        img: temp.imgs ? temp.imgs[0] : "",
        isLiked: temp.isLiked,
        likeNum: temp.likeNum,
        title: temp.title,
        userId: temp.userId,
        userImg: temp.userImg,
        userName: temp.userName
      }
    }
  },
  mounted() {
    if (this.$route.query.id === undefined) {
      this.isCurrent = true;
      this.user.id = "";
    } else {
      this.isCurrent = false;
      this.user.id = this.$route.query.id;
    }
    this.userDetail()
  }
}
</script>

<style lang="scss" scoped>
.background {
  width: 100%;
  height: 40vh; /**宽高100%是为了图片铺满屏幕 */
  z-index: -999;
  position: absolute;
}
</style>